<template>
  <div class="expert-card">
    <div class="pic">
      <div class="avatar">
        <img crossorigin="anonymous" :src="pic" />
      </div>
    </div>
    <div class="name" :title="name">{{name}}</div>
    <div class="alias">{{alias}}</div>
    <div class="info">
      <div class="remark">{{remark ? remark : ''}}</div>
      <div class="remark-detail">{{remark ? '简介：' + remark : ''}}</div>
      <a-divider v-if="tags && tags != ''" class="divider"></a-divider>
      <div v-if="tags && tags != ''" class="tags">{{tags ? '擅长：' + tags : ''}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ExpertCard',
  props: {
    name: String,
    pic: String,
    alias: String,
    remark: String,
    tags: String,
  },
  data () {
    return {
    }
  },
}
</script>

<style lang="less" scoped>
.expert-card {
  width: calc(25% - 15px);
  height: 386px;
  box-shadow: 0px 2px 10px 0px @box-shadow-color;
  border-radius: 20px;
  background: @white;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;

  .pic {
    width: 140px;
    height: 140px;
    margin-top: 40px;
    border-radius: 70px;
    background: @border-red-light;
    display: flex;
    flex-direction: column;
    align-items: center;

    .avatar {
      width: 120px;
      height: 120px;
      border-radius: 60px;
      margin-top: 10px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }

  .name {
    max-width: calc(100% - 40px);
    height: 27px;
    line-height: 27px;
    font-size: 20px;
    font-weight: 500;
    color: @font-black;
    margin-top: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .alias {
    max-width: calc(100% - 40px);
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    font-weight: 400;
    color: @font-grey;
    margin-top: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .info {
    margin-top: 20px;
    padding: 0 20px;
    width: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;

    .remark {
      display: block;
      height: 63px;
      line-height: 21px;
      font-size: 14px;
      font-weight: 400;
      color: @font-grey;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .remark-detail {
      display: none;
    }
    .divider {
      display: none;
    }
    .tags {
      display: none;
    }
  }
}
.expert-card:hover {
  width: 285px;
  height: 386px;
  box-shadow: 0px 2px 10px 0px @box-shadow-color;
  border-radius: 20px;
  background: @white;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;

  .pic {
    width: 70px;
    height: 70px;
    margin-top: 20px;
    border-radius: 35px;
    background: @border-red-light;
    display: flex;
    flex-direction: column;
    align-items: center;

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 30px;
      margin-top: 5px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }

  .name {
    height: 27px;
    line-height: 27px;
    font-size: 20px;
    font-weight: 500;
    color: @font-black;
    margin-top: 14px;
  }

  .alias {
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    font-weight: 400;
    color: @font-grey;
    margin-top: 10px;
  }

  .info {
    margin-top: 10px;
    padding: 10px 20px 0 20px;
    width: 100%;
    height: 223px;
    background: #F8F7F7;
    border-radius: 0px 0px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .remark {
      display: none;
    }
    .remark-detail {
      height: 126px;
      line-height: 21px;
      font-size: 14px;
      font-weight: 400;
      color: @font-grey;

      /* 以下为关键属性 */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6; /* 控制显示行数 */
      overflow: hidden;
      text-overflow: ellipsis;
      /* 可选：确保自然换行 */
      white-space: normal;
    }
    .tags {
      margin-top: 10px;
      height: 42px;
      line-height: 21px;
      font-size: 14px;
      font-weight: 400;
      color: #C20017;

      /* 以下为关键属性 */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 控制显示行数 */
      overflow: hidden;
      text-overflow: ellipsis;
      /* 可选：确保自然换行 */
      white-space: normal;
    }
    :deep(.ant-divider-horizontal) {
      margin: 0;
    }
    .divider {
      display: block;
      margin-top: 10px;
    }
  }
}
</style>
